<template>
  <div class="recommend-container">
    <!-- 标题区域 -->
    <div class="header">
      <el-divider content-position="left">
        <h2 class="title">
          <el-icon><Star /></el-icon>
          猜你喜欢
        </h2>
      </el-divider>
    </div>

    <!-- 商品展示区域 -->
    <div class="product-list">
      <el-row :gutter="20">
        <el-col 
          v-for="product in products" 
          :key="product.id"
          :xs="24" :sm="12" :md="8" :lg="6" :xl="4"
        >
          <el-card 
            class="product-card" 
            shadow="hover"
            @click="viewProductDetail(product.id)"
          >
            <!-- 商品图片 -->
            <div class="product-image">
              <el-image 
                :src="product.image" 
                fit="cover"
                :preview-src-list="[product.image]"
              >
                <template #error>
                  <div class="image-error">
                    <el-icon></el-icon>
                  </div>
                </template>
              </el-image>
              <div v-if="product.discount" class="discount-tag">
                {{ product.discount }}折
              </div>
            </div>

            <!-- 商品信息 -->
            <div class="product-info">
              <h3 class="product-title">{{ product.name }}</h3>
              <div class="price-section">
                <span class="current-price">¥{{ product.price }}</span>
                <span v-if="product.originalPrice" class="original-price">
                  ¥{{ product.originalPrice }}
                </span>
              </div>
              <div class="rating-section">
                <el-rate
                  v-model="product.rating"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value} 分"
                />
                <span class="sales">已售 {{ product.sales }}</span>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
              <el-button 
                type="primary" 
                size="small" 
                @click.stop="addToCart(product)"
              >
                <el-icon><ShoppingCart /></el-icon>
                加入购物车
              </el-button>
              <el-button 
                type="success" 
                size="small" 
                @click.stop="buyNow(product)"
              >
                <el-icon><SoldOut /></el-icon>
                立即购买
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 加载更多 -->
    <div class="load-more">
      <el-button 
        type="text" 
        :loading="loading" 
        @click="loadMore"
      >
        加载更多 <el-icon><ArrowDown /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { 
  Star,  ShoppingCart, SoldOut, ArrowDown 
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 模拟商品数据
const products = ref([
  {
    id: 1,
    name: '高端智能手表 Pro Max',
    image: 'https://via.placeholder.com/300x300?text=智能手表',
    price: 1299,
    originalPrice: 1599,
    discount: 8.1,
    rating: 4.7,
    sales: 1254
  },
  {
    id: 2,
    name: '无线蓝牙降噪耳机',
    image: 'https://via.placeholder.com/300x300?text=蓝牙耳机',
    price: 399,
    originalPrice: 499,
    discount: 8,
    rating: 4.5,
    sales: 876
  },
  {
    id: 3,
    name: '超薄笔记本电脑',
    image: 'https://via.placeholder.com/300x300?text=笔记本电脑',
    price: 5999,
    originalPrice: 6999,
    discount: 8.6,
    rating: 4.8,
    sales: 532
  },
  {
    id: 4,
    name: '高清数码相机',
    image: 'https://via.placeholder.com/300x300?text=数码相机',
    price: 3299,
    originalPrice: 3599,
    discount: 9.2,
    rating: 4.6,
    sales: 321
  },
  {
    id: 5,
    name: '智能扫地机器人',
    image: 'https://via.placeholder.com/300x300?text=扫地机器人',
    price: 2499,
    originalPrice: 2999,
    discount: 8.3,
    rating: 4.4,
    sales: 765
  },
  {
    id: 6,
    name: '多功能空气炸锅',
    image: 'https://via.placeholder.com/300x300?text=空气炸锅',
    price: 499,
    originalPrice: 599,
    discount: 8.3,
    rating: 4.3,
    sales: 987
  }
])

const loading = ref(false)

// 查看商品详情
const viewProductDetail = (id) => {
  router.push(`/product/${id}`)
}

// 加入购物车
const addToCart = (product) => {
  console.log('加入购物车:', product)
  ElMessage.success(`已添加 ${product.name} 到购物车`)
}

// 立即购买
const buyNow = (product) => {
  console.log('立即购买:', product)
  router.push(`/checkout?productId=${product.id}`)
}

// 加载更多商品
const loadMore = () => {
  loading.value = true
  // 模拟异步加载
  setTimeout(() => {
    const newProducts = [...Array(3)].map((_, i) => ({
      id: products.value.length + i + 1,
      name: `推荐商品 ${products.value.length + i + 1}`,
      image: `https://via.placeholder.com/300x300?text=商品${products.value.length + i + 1}`,
      price: Math.round(Math.random() * 1000 + 100),
      originalPrice: Math.round(Math.random() * 1000 + 500),
      discount: (Math.random() * 2 + 8).toFixed(1),
      rating: (Math.random() * 1 + 4).toFixed(1),
      sales: Math.floor(Math.random() * 1000)
    }))
    products.value = [...products.value, ...newProducts]
    loading.value = false
  }, 1000)
}

// 模拟从API获取数据
onMounted(() => {
  // 实际项目中这里应该是API调用
  // fetchRecommendedProducts().then(data => products.value = data)
})
</script>

<style scoped>
.recommend-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.header {
  margin-bottom: 30px;
}

.title {
  display: flex;
  align-items: center;
  color: #ff6700;
  margin: 0;
}

.title .el-icon {
  margin-right: 10px;
  font-size: 1.2em;
}

.product-list {
  margin-bottom: 30px;
}

.product-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.discount-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff4d4f;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.product-info {
  padding: 15px 0;
}

.product-title {
  font-size: 16px;
  margin: 0 0 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price-section {
  margin-bottom: 10px;
}

.current-price {
  font-size: 18px;
  color: #ff6700;
  font-weight: bold;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
  margin-left: 8px;
}

.rating-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sales {
  font-size: 12px;
  color: #999;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.load-more {
  text-align: center;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .product-image {
    height: 150px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .action-buttons .el-button {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>